<!--
  * 操作记录 列表
  *
-->
<template>
  <a-form class="smart-query-form" v-privilege="'operateLog:query'">
    <a-row class="smart-query-form-row">
      <a-form-item label="用户筛选" class="smart-query-form-item">
        <a-input style="width: 200px" v-model:value="queryForm.accessUserName" placeholder="请求用户" />
      </a-form-item>
      <a-form-item label="部门筛选" class="smart-query-form-item">
        <DepartmentTreeSelect style="width: 200px" ref="departmentTreeSelect" v-model:value="queryForm.deptCode" />
      </a-form-item>
      
      <a-form-item label="请求时间" class="smart-query-form-item">
        <a-range-picker @change="changeCreateDate" v-model:value="createDateRange" :ranges="defaultChooseTimeRange" style="width: 240px" />
      </a-form-item>

      <a-form-item label="请求地址" class="smart-query-form-item">
        <a-input style="width: 200px" v-model:value="queryForm.accessUrl" placeholder="请求地址" />
      </a-form-item>

      <a-form-item label="是否成功" class="smart-query-form-item">
        <a-switch v-model:checked="queryForm.success" checked-children="是" checkedValue="Y"  un-checked-children="否" unCheckedValue="Y" />
      </a-form-item>

      <a-form-item class="smart-query-form-item smart-margin-left10">
        <a-button type="primary" @click="ajaxQuery">
          <template #icon>
            <ReloadOutlined />
          </template>
          查询
        </a-button>
        <a-button @click="resetQuery">
          <template #icon>
            <SearchOutlined />
          </template>
          重置
        </a-button>
      </a-form-item>
    </a-row>
  </a-form>

  <a-card size="small" :bordered="false" :hoverable="true" style="height:100%">
    <a-row justify="end">
      <TableOperator class="smart-margin-bottom5" v-model="columns" :tableId="TABLE_ID_CONST.SUPPORT.CONFIG" :refresh="ajaxQuery" />
    </a-row>
    <a-table size="small" :loading="tableLoading" :dataSource="tableData" :columns="columns" bordered rowKey="id" :pagination="false" >
      <template #bodyCell="{ text, record, column }">
        <template v-if="column.dataIndex === 'success'">
            <span>{{ $smartEnumPlugin.getDescByValue('FLAG_ENUM', text) }}</span>
          </template>
        <template v-if="column.dataIndex === 'action'">
          <div class="smart-table-operate">
            <a-button @click="showDetail(record)" type="link" v-privilege="'operateLog:detail'">详情</a-button>
          </div>
        </template>
      </template>
    </a-table>

    <div class="smart-query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.pageSize"
        v-model:current="queryForm.pageIndex"
        v-model:pageSize="queryForm.pageSize"
        :total="total"
        @change="ajaxQuery"
        @showSizeChange="ajaxQuery"
        :show-total="(total) => `共${total}条`"
      />
    </div>

    <OperateLogDetailModal ref="detailModal" />
  </a-card>
</template>
<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import OperateLogDetailModal from './operate-log-detail-modal.vue';
  import { operateLogApi } from '/@/api/support/operate-log/operate-log-api';
  import { PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import { defaultTimeRanges } from '/@/lib/default-time-ranges';
  import { smartSentry } from '/@/lib/smart-sentry';
  import TableOperator from '/@/components/support/table-operator/index.vue';
  import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
  import DepartmentTreeSelect from '/@/components/system/department-tree-select/index.vue';

  const columns = ref([
    {
      title: '用户名称',
      dataIndex: 'accessUserName',
      width: 80,
    },
    {
      title: '部门名称',
      dataIndex: 'accessDeptName',
      width: 120,
      ellipsis: true,
    },
    {
      title: '请求时间',
      dataIndex: 'createTime',
      width: 150,
      ellipsis: true,
    },
    {
      title: '请求地址',
      dataIndex: 'accessUrl',
      width: 200,
      ellipsis: true,
    },
    {
      title: '请求IP',
      dataIndex: 'accessIp',
      width: 100,
      ellipsis: true,
    },
    {
      title: '时长',
      dataIndex: 'connectInterval',
      width: 60,
      ellipsis: true,
    },
    {
      title: '成功？',
      dataIndex: 'success',
      width: 60,
      ellipsis: true,
    },
    {
      title: '请求参数',
      dataIndex: 'reqParams',
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 60,
    },
  ]);

  const queryFormState = {
    accessUserName: undefined,
    success: undefined,
    deptCode: undefined,
    accessUrl: undefined,
    startTime: undefined,
    endTime: undefined,
    pageIndex: 1,
    pageSize: 10,
  };
  const queryForm = reactive({ ...queryFormState });
  const createDateRange = ref([]);
  const defaultChooseTimeRange = defaultTimeRanges;
  // 时间变动
  function changeCreateDate(dates, dateStrings) {
    queryForm.startTime = dateStrings[0];
    queryForm.endTime = dateStrings[1];
  }

  const tableLoading = ref(false);
  const departmentTreeSelect = ref();
  const tableData = ref([]);
  const total = ref(0);

  function resetQuery() {
    Object.assign(queryForm, queryFormState);
    createDateRange.value = [];
    ajaxQuery();
  }
  async function ajaxQuery() {
    try {
      tableLoading.value = true;
      let responseModel = await operateLogApi.queryList(queryForm);
      total.value = responseModel.data.total;
      tableData.value = responseModel.data.data;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }

  onMounted(ajaxQuery);

  // ---------------------- 详情 ----------------------
  const detailModal = ref();
  function showDetail(record) {
    detailModal.value.show(record);
  }
</script>
